<template>
  <div>
    <div class="pagination-wrapper">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalItems"
          @current-change="handlePageChange"
      ></el-pagination>

      <div class="search-wrapper">
        <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            clearable
            @clear="handleClear"
            @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
    </div>

    <div class="card-container">
      <el-card
          v-for="(card, index) in pagedCards"
          :key="index"
          class="custom-card"
          @mouseenter="handleCardHover(index, true)"
          @mouseleave="handleCardHover(index, false)"
          :style="{ transform: getCardTransformStyle(index) }"
      >
        <div class="card-wrapper">
          <div class="card-image">
            <img :src="card.imageSrc" :alt="card.title" />
          </div>
          <div class="card-details">
            <h3>{{ card.title }}</h3>
            <p>{{ card.address }}</p>
            <p>{{ card.contact}}</p>
            <p>{{ card.description }}</p>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png'
import {ref} from 'vue';
export default {

  setup() {
    const searchText = ref('');

    const handleSearch = () => {
      // 处理搜索逻辑
      console.log('搜索：', searchText.value);
    };

    const handleClear = () => {
      searchText.value = '';
    };

    return {
      searchText,
      handleSearch,
      handleClear,
    }

  },

  data() {
    return {
      cards: [
        {
          imageSrc: logo,
          title: "大连医科大学附属中山医院",
          address: "辽宁省大连市沙河口区友谊街3号",
          contact: "电话：0411-83635999",
          description: "简介：大连医科大学附属中山医院是一所综合性大型医院，成立于1907年，是中国医科大学的附属医院之一。\n" +
              "\n" +
              "强项科室：心脏外科、神经外科、泌尿外科、妇产科、儿科、中西医结合科等。",
          isHovered: false
        },
        {
          imageSrc: logo,
          title: "大连医科大学附属第一医院",
          address: "辽宁省大连市沙河口区人民路222号",
          contact: "电话：0411-62913893",
          description: "简介：大连医科大学附属第一医院是一所综合性临床医学研究所，创立于1959年。\n" +
              "\n" +
              "强项科室：心血管内科、心脏外科、泌尿外科、神经外科、妇产科、骨科等。",
          isHovered: false
        },
        {
          imageSrc: logo,
          title: "大连市中心医院",
          address: "辽宁省大连市中山区康复路466号",
          contact: "辽宁省大连市中山区康复路466号",
          description: "简介：大连市中心医院是一所综合性医学中心，历史悠久，设有多个医疗科室和研究院所。\n" +
              "\n" +
              "强项科室：心血管内科、神经外科、消化内科、骨科、内分泌科、呼吸内科等。",
          isHovered: false
        },
        {
          imageSrc: logo,
          title: "大连市儿童医院",
          address: "辽宁省大连市西岗区南沙河街30号",
          contact: "电话：0411-62822800",
          description: "简介：大连市儿童医院是一家专门为儿童提供医疗和健康服务的专科医院。\n" +
              "\n" +
              "强项科室：儿科、新生儿科、小儿外科、小儿呼吸科、小儿神经外科等。",
          isHovered: false
        },
        {
          imageSrc: logo,
          title: "大连市中医院",
          address: "辽宁省大连市中山区木兰街55号",
          contact: "电话：0411-39922777",
          description: "简介：大连市中医院是一所专注于中医诊疗和中医科学研究的综合医院。\n" +
              "\n" +
              "强项科室：中医内科、中医外科、中医妇科、中医肿瘤科、中医消化科等。",
          isHovered: false
        },
        // 添加更多卡片数据...
      ],
      currentPage: 1,
      pageSize: 3
    };
  },
  computed: {
    totalItems() {
      return this.cards.length;
    },
    pagedCards() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = this.currentPage * this.pageSize;
      return this.cards.slice(startIndex, endIndex);
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleCardHover(index, isHovered) {
      this.cards[index].isHovered = isHovered;
    },
    getCardTransformStyle(index) {
      if (this.cards[index].isHovered) {
        return "scale(1.1)";
      } else {
        return "none";
      }
    }
  }
}
</script>

<style>
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-wrapper {
  display: flex;
}

.custom-card {
  width: 1000px;
  margin-bottom: 20px;
  margin-left: 100px;
  margin-top: 20px;
  transition: transform 0.3s ease;
}

.card-image {
  width: 100px;
  height: 100px;
}

.card-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.card-details {
  flex: 1;
  padding: 20px;
}

.search-wrapper {
  display: flex;
  align-items: center;
}

.search-wrapper .el-input {
  width: 300px;
  margin-right: 20px;
}
</style>
